<template>
  <div class="submitATool mt-6">
    <div class="rounded-lg px-4 pt-6 pb-7 box-shadow">
      <h3 class="text-2xl text-gray-1000 font-semibold text-center">
        {{$t('submit_toolsYou')}}
      </h3>
      <div class="max-w-4xl mx-auto mt-6">
        <div class="label">{{$t('submit_supportUpdates')}}</div>
        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-3 mt-6">
          <div class="flex items-center gap-1.5 p-3 border rounded text-base text-gray-1000"
            :class="{'border-gray-1600 bg-gray-2600':item.isAble, 'border-gray-1600 bg-gray-3300':!item.isAble}"
            v-for="(item, key) in updatesList">
            <svg-icon className="w-4 h-4 flex-shrink-0"
              :isDiv="true"
              iconName='check_3'
              v-if="item.isAble"></svg-icon>
            <svg-icon className="w-4 h-4 flex-shrink-0"
              :isDiv="true"
              iconName='close-gray'
              v-else></svg-icon>
            <span class="text-base text-gray-1000">{{$t(item.label)}}</span>
          </div>
        </div>
        <div class="flex justify-center items-center bg-gray-2600 px-4 sm:px-14 py-6 mt-7 submit-ctrl gap-4 flex-wrap rounded-sm">
          <div class="flex-shrink-0">
            <div class="text-3xl text-gray-1000 font-semibold"> {{$t('submit_totalNum', {num: 49})}}</div>
          </div>
          <el-button type="primary"
            class="flex-shrink-0 w-full sm:w-auto"
            :loading="loading"
            @click="submitForm()">
            {{$t('submit_payNum', {num: 49})}}
          </el-button>
        </div>
        <div class="bg-gray-2600 px-4 sm:p-5 mt-3.5 rounded-sm">
          <h3 class="text-xl text-gray-1000 font-semibold">
            {{$t('submit_needTo')}}
          </h3>
          <div class="text-md text-gray-1000 space-y-3.5 mt-4">
            <p>
              {{$t('submit_onceThePayment')}}
            </p>
            <p>
              {{$t('submit_forExample')}}
            </p>
            <p v-html="$t('submit_important')"></p>
            <p>
              {{$t('submit_onceUpdated')}}
            </p>
            <p>
              {{$t('submit_ aPaymentCanOnly')}}
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  name: 'SubmitUpdateAi',
  props: {},
  data() {
    return {
      loading: false,
      updatesList: [
        { label: 'submit_toolName', isAble: true },
        { label: 'submit_introduction', isAble: true },
        { label: 'submit_toolDescription', isAble: true },
        { label: 'submit_category', isAble: true },
        { label: 'submit_howTo', isAble: true },
        { label: 'submit_coreFeatures', isAble: true },
        { label: 'submit_useCases', isAble: true },
        { label: 'submit_pricingPlan', isAble: true },
        { label: 'submit_faqs', isAble: true },
        { label: 'submit_websiteURLs', isAble: false },
      ],
    }
  },
  computed: {
    ...mapState({
      locale: (state) => state.locale,
      toolify_isLogin: (state) => state.toolify_isLogin,
    }),
  },
  methods: {
    async submitForm() {
      if (!this.toolify_isLogin) {
        this.$router.replace(`/login?from=${this.$route.name}`)
        return false
      }

      this.loading = true
      try {
        let res
        let req = {}
        let langPath = `${this.locale !== 'en' ? `/${this.locale}` : ''}`
        req.success_url = `${window.location.origin}${langPath}/payment?type=updateAi`
        req.cancel_url = `${window.location.origin}${langPath}/update-ai`

        res = await this.$axiosApi.completionSubmit(req)

        this.loading = false
        if (
          res &&
          res.code === 200 &&
          res.data &&
          res.data.stripe &&
          res.data.stripe.url
        ) {
          window.location.href = res.data.stripe.url
        }
      } catch (error) {
        this.loading = false
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.submitATool {
  .box-shadow {
    box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.06);
  }
  .label {
    font-size: 20px;
    font-weight: bold;
    color: #191919;
    line-height: 28px;
  }
  .submit-ctrl {
    .el-button {
      font-size: 16px;
      max-width: 100%;
      padding-left: 30px;
      padding-right: 30px;
    }
  }
}
</style>
